<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="table-form-box">
                <h3 class="h3">考核详情</h3>

                <table border="0" width="100%" cellpadding="0" cellspacing="1">
                    <tbody>
                        <tr>
                            <td align="right">创建人:</td>
                            <td>{{formData.createUserName}}</td>
                            <td align="right">
                                <span class="color-ff2200">*</span>考核类别:
                            </td>
                            <td>{{formData.templateTypeName}}</td>
                            <td align="right">
                                <span class="color-ff2200">*</span>模板名称:
                            </td>
                            <td>{{formData.templateName}}</td>

                            <td align="right">
                                <span class="color-ff2200">*</span>考核月份:
                            </td>
                            <td>
                                <el-date-picker
                                    v-model="formData.kaoheMonth"
                                    type="month"
                                    placeholder="选择月"
                                    disabled
                                ></el-date-picker>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div style="margin-top:10px;border:1px solid">
                    <div style="margin:10px;">
                        <vxe-table
                            stripe
                            border
                            show-footer
                            :footer-method="footerMethod"
                            resizable
                            ref="xTable"
                            :data="tableData"
                            :edit-rules="validRules"
                        >
                            <vxe-table-column type="seq" width="60"></vxe-table-column>
                            <vxe-table-column
                                field="itemName"
                                title="考核项"
                                :edit-render="{name: 'input', attrs: {type: 'text', disabled: true}}"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="points"
                                title="分数"
                                :edit-render="{name: '$input', props: {type: 'number',min:0,max:999, disabled: true}}"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="description"
                                title="考核说明"
                                :edit-render="{name: 'input', attrs: {type: 'text', disabled: true}}"
                            ></vxe-table-column>
                            <vxe-table-column
                                field="selfPoints"
                                title="自评分数"
                                :edit-render="{name: '$input', props: {type: 'number',min:0,max:999}}"
                            ></vxe-table-column>

                            <vxe-table-column
                                field="upPoints"
                                title="上级评分"
                                :edit-render="{name: '$input', props: {type: 'number',min:0,max:999}}"
                            ></vxe-table-column>
                        </vxe-table>
                    </div>
                </div>

                <div style="margin-top:10px;">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <tbody>
                            <tr>
                                <td align="right" width="100">评语:</td>
                                <td colspan="5">{{formData.evaluationCommont}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 上传附件 -->
                <upload-files :files="fileList" @fun="dealFiles" :isShowDel="false" v-if="flag"></upload-files>
            </div>
        </div>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
import XEUtils from 'xe-utils';
export default {
    name: 'transfer',
    data() {
        return {
            pageTitle: '',
            formData: {
                kaoheMonth: '',
                kaoheTotalPoints: '',
                templateName: '', //模板名称
                templateTypeId: '', //模板类型
                templateTypeName: '', //模板类型名称
                templateTypeValue: '', //模板类型
                selfTotalPoints: '', //自评总得分
                assessmentPoints: '', //上级评分总分
                finalyTotalPoints: '', //最终得分 这里需要有一个业务打分公式或者目前暂时就以上级评分为准
                kaoheItems: [], //考核项JSON,
                evaluationCommont: '', //考核评语
                uploadReturns: [] //附件
            },
            validRules: {
                itemName: [{ required: true, message: '考核项必须填写' }],
                points: [
                    { required: true, message: '考核分数必须填写' },
                    { pattern: '^[0-9]{0,3}$', message: '格式不正确' }
                ],
                selfPoints: [
                    { required: true, message: '自评分数必须填写' },
                    { pattern: '^[0-9]{0,3}$', message: '格式不正确' }
                ],
                description: [
                    { required: true, message: '考核说明必须填写' },
                    { min: 2, max: 300, message: '长度在 2 到 300 个字符' }
                ]
            },
            fileList: [],
            flag: false,
            isEdit: false,
            editId: '',
            //调动类型
            templateTypeOption: [],
            itemNameOption: [],
            tableData: []
        };
    },
    created() {
        // 如果有id就是跳转过来修改的
        if (this.$route.query.id) {
            this.editId = this.$route.query.id;
            this.isEdit = true;
            this.getData(); // 获取要修改的数据
        } else {
            this.$router.push({
                path: '/assessmentAllList' //跳转的路径
            });
        }
    },
    methods: {
        getData() {
            appMain
                .assessmentKaoheFindById({}, this.editId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;
                        this.tableData = JSON.parse(res.data.data.kaoheItems);
                        console.log('getData', this.formData);
                        //获取人员档案附件
                        this.uploadFileInfoFindById(this.formData.id);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                        this.flag = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        // 上传文件返回
        dealFiles(data) {
            this.fileList = data.backData;
            this.formData.uploadReturns = this.fileList;
        },
        //表脚
        footerMethod({ columns, data }) {
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '合计';
                    }
                    if (columnIndex === 2) {
                        //console.log('columns', data);
                        let coin = `${XEUtils.sum(data, 'points')}`;
                        this.formData.kaoheTotalPoints = coin;
                        return '考核总分:' + coin + ' 分';
                    }
                    if (columnIndex === 3) {
                        //console.log('columns', data);
                        let coin = `${XEUtils.sum(data, 'selfPoints')}`;
                        this.formData.selfTotalPoints = coin;
                        return '自评总分:' + coin + ' 分';
                    }
                    if (columnIndex === 4) {
                        //console.log('columns', data);
                        let coin = `${XEUtils.sum(data, 'upPoints')}`;
                        //this.formData.assessmentPoints = coin;
                        return '上级总分:' + coin + ' 分';
                    }
                    if (columnIndex === 5) {
                        //console.log('columns', data);
                        let coin = `${XEUtils.sum(data, 'upPoints')}`;
                        //this.formData.assessmentPoints = coin;
                        return '最终得分:' + coin + ' 分';
                    }
                    return '-';
                })
            ];
        }
    },
    mounted() {
        this.pageTitle = this.$router.currentRoute.meta.title;
    }
};
</script>

<style scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.table {
    width: 100%;
    font-size: 14px;
}

.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 14px;
}
.color-ff2200 {
    color: #ff2200;
}
</style>
